<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" style="height:100%">
<head>
	<title>品質チェック情報検索</title>
	<jsp:include page="../basePage/head.jsp" />	  
    <script src="./js/util/globalajaxevent.js"></script>  
    <jsp:include page="../basePage/jqplot.jsp" /> 
 	 <style>
		    .ui-datepicker-calendar {display: none;}
		    #dataType{width:80px;} 
   	</style> 
	<script>
	 
		
	
	 $(function() {		
		 
		 var exportExcel = '${exportExcel}';
		if (exportExcel=='true'){
			$('#buttonExport').show(); 
		}else{ 
			$('#buttonExport' ).hide();
		}
		 
		 
		//设置默认日期 
		//开始日期：上个月 结束日期 当前日期		
		var toDate = getLastMonth(); 
		 
		
		//日期选择框格式化 
		 initDatepicker('dateTo',toDate);
 
		//设置dateType
	     $("#dataType").multiselect({selectedList: 1,header:false, multiple: false,noneSelectedText:""}) ;
		
		$('#buttonSearch,#buttonExport').button();		 			
	 
		$( "#buttonSearch" ).button().click(function( event ) {	
			
			 //validate dateType
			var validate = $("#dataForm").validate().element($("#dataType"));
			 
			$('#TableBaseInfo,#TableBaseInfo,#ChartKPT,#ChartAFS,#ChartWBP,#ChartSLK,#TableMissTypeInfo,#ChartMiss').empty();
			
			if (!validate){
				return;
			}
			
			 var dataType = $('#dataType').find("option:selected").text(); 				 
		 
			 $.ajax({
			        type: "POST",
			        async: true,
			        url:"qualityCheckQuery!refreshData.action",
			        data:$('#dataForm').serialize(),			         
					success: function (data) {
						
						 
						if (data.tableData.TableBaseInfo.length==0  ){
							
							   $( "#noResult" ).dialog({modal:true});
								return;	
								}
						
						
							outputGrid('TableBaseInfo',data.tableData.TableBaseInfo,dataType+"合格率推算【"+dataType+"案件（万文字）】",false);
							
							var width=$("#TableBaseInfo").width();     	  				      	
					     	$("#TableBaseInfo_datagrid").setGridWidth(width);
					     	setColumnsNoSort("#TableBaseInfo_datagrid"); 
					     	
					     	outputChartB("ChartKPT",data.tableData.KPT検査合格率,data.tableData.KPT6ヶ月間平均合格率,"KPT案件");
					     	outputChartB("ChartAFS",data.tableData.AFS検査合格率,data.tableData.AFS6ヶ月間平均合格率,"AFS案件");
					     	outputChartB("ChartWBP",data.tableData.WBP検査合格率,data.tableData.WBP6ヶ月間平均合格率,"WBP案件");
					     	outputChartB("ChartSLK",data.tableData.SLK検査合格率,data.tableData.SLK6ヶ月間平均合格率,"SLK案件");
						 
						
						 
						
							outputGrid('TableMissTypeInfo',data.tableData.TableMissTypeInfo,dataType+"類ミス率【ppm=百万分】",false);
							
					     	
					    	var width=$("#TableMissTypeInfo").width();     	  				      	
					     	$("#TableMissTypeInfo_datagrid").setGridWidth(width);
					     	setColumnsNoSort("#TableMissTypeInfo_datagrid");  
							
					     	
					     	
							outputChartA("ChartMiss",data.tableData.ルールミス,
									data.tableData.変換ミス,
									data.tableData.漏れ余分,
									data.tableData.不読識別問題,
									data.tableData.入力対象,
									data.tableData.確認不足);
						 
 					},
			        error: function (err) {
						alert(err);
			        }
				});	  	 		  		
		 }); 
		
		$( "#buttonExport").button().click(function( event ) {
			
			var validate = $("#dataForm").validate().element($("#dataType"));			
			
			if (!validate){
				return;
			}
			$('#dataForm').attr('action',"qualityCheckExport!export.action").submit();
		});
	});
	 
	 
		function outputGrid(target,data,caption,hidden){		
	  		$('#' + target ).empty();  		  	
			if(data == null || data.length==0  ) return;
			
	   		var row =[];
			for(var i=0;i<data.length  ;i++){				 							
				row.push($("<tr></tr>"));				 
			}  ;
			
		   	$('#' + target).empty().append('<table style="float:inherit" id=' + target + '_datagrid><tbody></tbody></table>');
			var table = $('#' + target + ' tbody');

		    var j=0;
	  		$.each(data,function(key,value){
	  			var index=0;
	  			$.each(value,function(k,v){  			  			
	  				var th = $("<th id =" + index + " nowrap='nowrap'></th>");
	  				var td = $("<td nowrap='nowrap'></td>");  		
	  	  		    if (j ==0 ){		
						th.append(v);
	  	  	        	th.appendTo(row[j]);
	  	  	        }
	  	  		    else{					  	  				
	  	  				td.append(v);
	  	  				td.appendTo(row[j]);
	  	  		    }
	  	  	    	index++;
	  			});  			
	  			j++;
	  		});
	  		for(var i=0;i<row.length;i++){
	  			row[i].appendTo(table);			
			};		
			

			  var ColModel='';
			  var Colwidth = 10;
			  var align ="right";
			  
			  for(var i=0;i<data[0].length  ;i++){				 							
			   if ( ColModel.length>0){
				   ColModel += ',';} 
			
			       if (target== "TableBaseInfo"){
				       if (i==0){
				    	   Colwidth = 120;
				    	   align ="left";
				       } else if (i==1) {
				    	   Colwidth =100;
				    	   align ="center";
				       }else  {
				    	   Colwidth =120; 
				    	   align ="right";
				       }
			       } else if (target== "TableMissTypeInfo") {
			    	   if (i==0){
				    	   Colwidth = 120;
				    	   align ="center";
				       } else if (i==1) {
				    	   Colwidth =120;
				    	   align ="center";
				       }else  {
				    	   Colwidth =120; 
				    	   align ="right";
				       }
			       }
			       
			  
				   ColModel += '{name:"' +i +'", index: "' + i+ '", width: ' + Colwidth+', align: "' + align +'" ,sortable:false} '; 
			  }  ;
				  
  	  		//tableToGrid(target + ' table',{
     	  	   tableToGrid('#' + target+"_datagrid",{
	  			//datatype: "local",  
	  			autoWidth:true,	  			
	  			height: "100%",           	  	
	         	caption: caption,
				shrinkToFit: false,
			  	colModel:eval("([" + ColModel + "])")
				,gridComplete:function(){				
					 paintColor(target);				  
				 }
     	  	   ,hiddengrid: hidden
	  		  });       
		};	
	  	
	  	function paintColor(target){  		  	
	  		$('#' + target + '_datagrid tr').each(function(){
	  		 
					//set all td align right
					//第三列以后 右对齐
					$(this).children("td").eq(0).css("background",'#ffffcc');
					 $(this).children("td").eq(1).css("background",'#ffffcc');  
				 
			});	
	  		 
	  	};
	  	
	  	//曲线
	  	function outputChartA(target,dataA,dataB,dataC,dataD,dataE,dataF){
			$('#' + target).empty();
			if(dataA == null ||
			   dataB == null || 
			   dataC == null ||
			   dataD == null ||
			   dataE == null ||
			   dataF == null )  {
				$('#' + target).hide();  
				return;
			}else{
				$('#' + target).show();  
			}
			
			
			$.jqplot(target, 
					  [ dataA,dataB,dataC,dataD,dataE,dataF], {		    
					    // Turns on animatino for all series in this plot.
		        		animate: true,
		        		// Will animate plot on calls to plot1.replot({resetAxes:true})
		        		animateReplot: true,
			     		//动画用      
			    		axesDefaults: {pad: 0},		            
		        		//图例
			        		legend:{show:true,
			        			placement : "outsideGrid",
			        			location: 's', 
			        			fontFamily: 'MS PGothic',
			        			fontSize: '8pt',
			        			renderer: $.jqplot.EnhancedLegendRenderer,
			        			rendererOptions: {numberColumns: 8}
			        			},			     
			     	 
			    		series:[
	 							 
								{label: 'ルールミス'},
								{label: '変換ミス'},
								{label: '漏れ余分'},
								{label: '不読識別問題'}, 	
								{label: '入力対象'},
								{label: '確認不足'}, 	
			                    {xaxis:'xaxis', yaxis:'yaxis'
			                    },
			                    {rendererOptions: {animation: {speed: 2000}}
			                    }],
					             //折线图
					    		seriesDefaults: {rendererOptions: {
					    	          smooth: true
					            }},		  
					     		axesDefaults: {tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
			        				   tickOptions: {showGridline: true,angle: 0,fontFamily: 'MS PGothic',fontSize: '10pt'}								
					    				},  
				  	    		axes: {xaxis: { renderer: $.jqplot.CategoryAxisRenderer},
					      			   /* x2axis: {renderer: $.jqplot.CategoryAxisRenderer,tickOptions: {show: false}}, */
						      		   // yaxis: { min:0,max:1000,tickInterval:100 ,tickOptions:{formatString:'%.0f人'} },
						      		      yaxis: { min:0,autoscale:true, tickOptions: {showGridline: true ,formatString:'%.1fppm'}},
					      			   /* y2axis: { autoscale:true,min:0,max:800,tickInterval:200 ,tickOptions: {showGridline: true}} */
					    			  	},
					 			//mark上高亮    
				     			highlighter: {
				     				show: true,
				     				sizeAdjust: 7.5,
				     				tooltipAxes: 'y'
				     				},
				      			//鼠标移动 显示坐标位置数据
				      			cursor: {show: false},		      				     			
					  });
				};
		//曲线 柱状
		function outputChartB(target,dataA,dataB,caption){
			$('#' + target).empty();
			if(dataA == null ||
			   dataB == null  ){  
				$('#' + target).hide();	
				return;
			}
			else{
				$('#' + target).show();  
			}
			   
			 
			
			
		  	var maxValue = dataA[0][1] * 1 ;
			var minValue = maxValue;
			
			for(var i=0;i<dataA.length;i++){			
				var value= dataA[i][1] * 1;
				if (value> maxValue)
					{ maxValue = value;}
				if (value<minValue)
					{ minValue = value;}
			}
			
			 //var tickInter =  ( 100.00 - minValue * 0.99 )  / 5.00   ; 
			  //var minTicks = ( 100.00 - tickInter * 5.00 ).toFixed(2) * 1 ;   
			  //var minTicks = minValue.toFixed(2) * 1;
			  var minTicks = minValue.toString().substring(0,minValue.toString().indexOf(".")+3);
			  minTicks = minTicks  * 1 ;
			  //var minTicks = ( minValue  - minValue * 0.001 ).toFixed(2) * 1 ;
			//  var tickInter =(( 100.00 - minTicks ) / 10 ).toFixed(2) * 1 ;
			
			$.jqplot(target, 
					  [dataA,dataB], 
					  {    
						// Turns on animatino for all series in this plot.
		        		animate: true,
		        		// Will animate plot on calls to plot1.replot({resetAxes:true})
		        		animateReplot: true,
			     		//动画用      
			    		axesDefaults: {pad: 0},	
			    		 
		        		//图例		        		
		        		legend:{show:true,
		        			placement : "outsideGrid",
		        			location: 'e', 
		        			fontFamily: 'MS PGothic',
		        			fontSize: '8pt',
		        			renderer: $.jqplot.EnhancedLegendRenderer,
		        			rendererOptions: {numberColumns: 1}
		        			},		 	 
			     		//柱状图
			    		series:[ 
				                {renderer:$.jqplot.BarRenderer,label: '合格率',color:'#0099cc',
				            	 rendererOptions: { animation: { speed: 2500 },  stackSeries: false,barWidth: 15, barPadding: -15, barMargin: 0,highlightMouseOver: false },
				            	 pointLabels:{ show:false,  ypadding: -15,  escapeHTML:false}
				                },       
			                    {xaxis:'x2axis', yaxis:'y2axis'},
			                    {rendererOptions: {animation: {speed: 2000}}
			                    }],
			            //折线图
			    		seriesDefaults: {label: '6ヶ月間平均合格率',
			    						 color:'#A3007C',
			    						 pointLabels: { show: false },
			    						 showMarker:true,						    	
			    	  					 markerOptions: {show: true}						    	
			    				},		   
			     		axesDefaults: {tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
			     			 tickOptions: {showGridline: true,angle: 0,fontFamily: 'MS PGothic',fontSize: '10pt'}							
			    				},  
			    		axes: {xaxis: { renderer: $.jqplot.CategoryAxisRenderer},
			      			   x2axis: { label: caption,labelOptions: {fontFamily: 'MS PGothic',fontSize: '12pt'},
			      				   renderer: $.jqplot.CategoryAxisRenderer,tickOptions: {show: false}			      			   
			    				},			    		
			      			   yaxis: {autoscale:true ,min:minTicks,max:100.00,tickOptions:{formatString:'%.3f%'}},
			      			   y2axis: {autoscale:true ,min:minTicks,max:100.00,tickOptions: {show: false,showGridline: false,formatString:'%.3f%'}}
			    			  	},
			 			//mark上高亮    
		     			highlighter: {
		     				show: true,
		     				sizeAdjust: 7.5,
		     				tooltipAxes: 'y'
		     				},
		      			//鼠标移动 显示坐标位置数据
		      			cursor: {show: false}
			  }).replot();
				}
	</script>

</head>

<body>

<s:form id="dataForm" theme="simple" >			
	<table style="white-space:nowrap">
		<tr>
		 	<th>分類</th>
		 	<td ><s:select name="dataTypeIndex" id="dataType" list="#{'0':'文字','1':'数字'}"    listKey="key" listValue="value"  multiple="true"  cssClass="required"></s:select></td>
		 	<th>時間</th> <td ><s:textfield id="dateTo" name="dateTo" key="value" label="结束日" cssClass="datebox" /></td>
			<td width=30></td>
				<td><a id="buttonSearch" href="#" class="button" >検索</a></td>
				<td><a id="buttonExport" href="#" style="width:100px" class="button"  >エクスポート</a></td>			
			<td>
				<span id="myIndicator" >
					<img  width=25 height=20 src="./img/ajax-loader.gif" alt="ロード中..." />ロード中....
				</span>
			 </td>		
		</tr>
	</table>
</s:form>

<hr>

<div id="dataContainer" style="position:absolute;overflow: auto!important;top:35px;bottom:0px;width:100%;">    			
 		 
		<div id="TableBaseInfo"   class="grid" ></div>
		<div id="ChartKPT"    style="clear:both;height:200px;border:1px;margin:10px; " ></div>
		<div id="ChartAFS"    style="clear:both;height:200px;border:1px;margin:10px;"></div>
		<div id="ChartWBP"    style="clear:both;height:200px;border:1px;margin:10px;"></div>
		<div id="ChartSLK"    style="clear:both;height:200px;border:1px;margin:10px;"></div>
	    <div id="TableMissTypeInfo"   class="grid" ></div>
	    <div id="ChartMiss"></div>
		
		<div id="noResult" title="メッセージ" style="display:none;">
 			<p>该当する検索结果がありません。</p>
 			<p>别の条件でもう一度検索してください。</p>
		</div>
 </div> 

</body>  
</html>